<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="/dist/output.css" rel="stylesheet">
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet">


    <link href="css/icon.css" rel="stylesheet">
    <link href="css/reset.css" rel="stylesheet">
    <script src="js/index.js"></script>
    <title>饿了么首页</title>
    <link rel="stylesheet" href="css/iconfont.css">
</head>
<body>


    <div class="h-full w-full">
<!--        header部分-->
        <header class="w-full h-11 bg-[#0097FF] flex items-center">
            <div class="w-3.5 h-3.5 mr-1 ml-5">
                <div class="icon-location "></div>
            </div>
            <div class="text-5 font-[700] text-white">
                沈阳市规划大厦 <i class="fa fa-caret-down" ></i>
            </div>

        </header>
<!--        搜索框部分-->
        <div class="w-full h-11">
            <div id="fixedBox" class="w-full h-11 bg-[#0097FF] flex justify-center items-center ">
                <div class="w-[90%] h-8 bg-white rounded-[2px] flex justify-center items-center text-4 text-[#AEAEAE] font-[“宋体”] select-none ">
                    <i class="i ic:outline-search mr-2"></i>搜索饿了么商家、商品名称
                </div>
            </div>

        </div>
        <!--        点餐分类部分-->
        <ul class="w-full h-48 flex flex-wrap justify-around content-center ">
            <li class="w-18 h-20 flex flex-col ml-3 justify-around items-center select-none cursor-pointer" onclick="location.href='businessList.html'">
                <img src="assets/img/dcfl01.png" class="w-12 h-12">
                <p class="text-xs text-[#666]">美食</p>
            </li>
            <li class="w-18 h-20  flex flex-col ml-4 justify-around items-center select-none cursor-pointer"  onclick="location.href='businessList.html'">
                <img src="assets/img/dcfl02.png" class="w-12 h-12">
                <p class="text-xs text-[#666]">早餐</p>
            </li>
            <li class="w-18 h-20 ml-4 flex flex-col  justify-around items-center select-none cursor-pointer"  onclick="location.href='businessList.html'">
                <img src="assets/img/dcfl03.png" class="w-12 h-12">
                <p class="text-xs text-[#666]">跑腿代购</p>
            </li>
            <li class="w-18 h-20 ml-4 flex flex-col justify-around items-center select-none cursor-pointer"  onclick="location.href='businessList.html'">
                <img src="assets/img/dcfl04.png" class="w-12 h-12">
                <p class="text-xs text-[#666]">汉堡披萨</p>
            </li>
            <li class="w-18 h-20 ml-3 mr-4 flex flex-col justify-around items-center select-none cursor-pointer"  onclick="location.href='businessList.html'">
                <img src="assets/img/dcfl05.png" class="w-12 h-12">
                <p class="text-xs text-[#666]">甜品饮品</p>
            </li>
            <li class="w-18 h-20 ml-4 flex flex-col justify-around items-center select-none cursor-pointer"  onclick="location.href='businessList.html'">
                <img src="assets/img/dcfl06.png" class="w-12 h-12">
                <p class="text-xs text-[#666]">速食简餐</p>
            </li>
            <li class="w-18 h-20 ml-3 flex flex-col justify-around items-center select-none cursor-pointer"  onclick="location.href='businessList.html'">
                <img src="assets/img/dcfl07.png" class="w-12 h-12">
                <p class="text-xs text-[#666]">地方小吃</p>
            </li>
            <li class="w-18 h-20 ml-4 flex flex-col justify-around items-center select-none cursor-pointer"  onclick="location.href='businessList.html'">
                <img src="assets/img/dcfl08.png" class="w-12 h-12">
                <p class="text-xs text-[#666]">米粉面馆</p>
            </li>
            <li class="w-18 h-20 ml-4 flex flex-col justify-around items-center select-none cursor-pointer"  onclick="location.href='businessList.html'">
                <img src="assets/img/dcfl09.png" class="w-12 h-12">
                <p class="text-xs text-[#666]">包子粥铺</p>
            </li>
            <li class="w-18 h-20 ml-3 mr-3 flex flex-col justify-around items-center select-none cursor-pointer"  onclick="location.href='businessList.html'">
                <img src="assets/img/dcfl10.png" class="w-12 h-12">
                <p class="text-xs text-[#666]">炸鸡炸串</p>
            </li >


        </ul>
        <!--        横幅广告部分-->
        <div class="w-[95%] mx-auto h-28 bg-[url('../myelm/src/assets/img/index_banner.png')] bg-no-repeat bg-cover box-border py-2 px-6 ">
            <h3 class="text-base mb-1.5 font-[700]">品质套餐</h3>
            <p class="text-xs text-[#666] mb-[2.4vw]">搭配齐全吃得好</p>
            <a href="" class="text-xs text-[#C79060] font-[700]">立即抢购 &gt;</a>
        </div>
        <!--    超级会员部分-->
        <div class="w-[95%] mx-auto mt-2 rounded-[2px] h-12 bg-[#FEEDC1] text-[#644F1B] flex justify-between items-center ">
            <div class="flex items-center ml-4 select-none">
                <img src="assets/img/super_member.png" class="w-6 h-6 mr-2">
                <h3 class="text-base mr-2 font-[700]">超级会员</h3>
                <p class="text-xs"> &#8226; 每月享超值权益</p>
            </div>
            <div class="text-xs mr-8 cursor-pointer">
                立即开通 &gt;
            </div>
        </div>
        <!--        推荐商家部分-->
        <div class="w-full h-14 flex justify-center items-center">
            <div class="w-6 h-0.5 bg-[#888]"></div>
            <p class="text-4 mx-4">推荐商家</p>
            <div class="w-6 h-0.5 bg-[#888]"></div>
        </div>
        <!--        推荐方式部分-->
        <ul class="w-full h-5 mb-5 flex justify-around items-center">
            <li class="text-xs text-[#555]">综合排序 <i class="fa fa-caret-down "></i></li>
            <li class="text-xs text-[#555]">距离最近</li>
            <li class="text-xs text-[#555]">销量最高</li>
            <li class="text-xs text-[#555]">筛选 <i class="fa fa-filter"></i></li>
        </ul>
        <!--推荐商家列表部分-->
        <ul class="w-full pb-14">
            <li class="w-full box-border p-2.5 select-none border-b-[#DDD] border-b-solid border-b-[1px] flex">
                <img src="assets/img/sj01.png" class="w-16 h-16">
                <div class="business-info w-full box-border pl-3">
                    <div class="business-info-h flex justify-between items-center mb-2">
                        <h3 class="text-base text-[#333] font-[700]">万家饺子馆（软件园E18店）</h3>
                        <div class="business-info-like w-1.5 h-3.5 bg-[#666] text-white text-4 mr-4 flex justify-center items-center">&#8226;</div>
                    </div>
                    <div class="business-info-star flex justify-between items-center mb-2 text-xs">
                        <div class="business-info-star-left flex items-center">
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <p class="text-[#666] ml-1">4.9 月售345单</p>
                        </div>
                        <div class="bg-[#0097FF] text-[#fff] text-xs rounded-[2px] px-0.5">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="flex justify-between items-center mb-2 text-[#666] text-xs">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>3.22km | 30分钟</p>
                    </div>
                    <div class="flex items-center mb-3">
                        <div class="border-[#DDD] border-solid border-[1px] text-xs text-[#666] rounded-[3px] px-0.5">各种饺子</div>
                    </div>
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-[#70BC46] text-xs text-white rounded-[3px] flex justify-center items-center">新</div>
                            <p class="text-[#666] text-xs ml-2">饿了么首单用户立减9元</p>
                        </div>
                        <div class="flex items-center text-xs text-[#999]">
                            <p class="mr-2">两个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-[#70BC46] text-xs text-white rounded-[3px] flex justify-center items-center" style="background-color: #F1884F">特</div>
                            <p class="text-[#666] text-xs ml-2"> 特价商品五元起</p>
                        </div>

                    </div>
                </div>
            </li>
            <li class="w-full box-border p-2.5 select-none border-b-[#DDD] border-b-solid border-b-[1px] flex">
                <img src="assets/img/sj02.png" class="w-16 h-16">
                <div class="business-info w-full box-border pl-3">
                    <div class="business-info-h flex justify-between items-center mb-2">
                        <h3 class="text-base text-[#333] font-[700]">小锅饭豆腐馆（全运店）</h3>
                        <div class="business-info-like w-1.5 h-3.5 bg-[#666] text-white text-4 mr-4 flex justify-center items-center">&#8226;</div>
                    </div>
                    <div class="business-info-star flex justify-between items-center mb-2 text-xs">
                        <div class="business-info-star-left flex items-center">
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <p class="text-[#666] ml-1">4.9 月售345单</p>
                        </div>
                        <div class="bg-[#0097FF] text-[#fff] text-xs rounded-[2px] px-0.5">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="flex justify-between items-center mb-2 text-[#666] text-xs">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>3.22km | 30分钟</p>
                    </div>
                    <div class="flex items-center mb-3">
                        <div class="border-[#DDD] border-solid border-[1px] text-xs text-[#666] rounded-[3px] px-0.5">各种豆腐</div>
                    </div>
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-[#70BC46] text-xs text-white rounded-[3px] flex justify-center items-center">新</div>
                            <p class="text-[#666] text-xs ml-2">饿了么首单用户立减9元</p>
                        </div>
                        <div class="flex items-center text-xs text-[#999]">
                            <p class="mr-2">两个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-[#70BC46] text-xs text-white rounded-[3px] flex justify-center items-center" style="background-color: #F1884F">特</div>
                            <p class="text-[#666] text-xs ml-2"> 特价商品五元起</p>
                        </div>

                    </div>
                </div>
            </li>
            <li class="w-full box-border p-2.5 select-none border-b-[#DDD] border-b-solid border-b-[1px] flex">
                <img src="assets/img/sj03.png" class="w-16 h-16">
                <div class="business-info w-full box-border pl-3">
                    <div class="business-info-h flex justify-between items-center mb-2">
                        <h3 class="text-base text-[#333] font-[700]">麦当劳麦乐送（全运路店）</h3>
                        <div class="business-info-like w-1.5 h-3.5 bg-[#666] text-white text-4 mr-4 flex justify-center items-center">&#8226;</div>
                    </div>
                    <div class="business-info-star flex justify-between items-center mb-2 text-xs">
                        <div class="business-info-star-left flex items-center">
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <p class="text-[#666] ml-1">4.9 月售345单</p>
                        </div>
                        <div class="bg-[#0097FF] text-[#fff] text-xs rounded-[2px] px-0.5">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="flex justify-between items-center mb-2 text-[#666] text-xs">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>3.22km | 30分钟</p>
                    </div>
                    <div class="flex items-center mb-3">
                        <div class="border-[#DDD] border-solid border-[1px] text-xs text-[#666] rounded-[3px] px-0.5">汉堡薯条</div>
                    </div>
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-[#70BC46] text-xs text-white rounded-[3px] flex justify-center items-center">新</div>
                            <p class="text-[#666] text-xs ml-2">饿了么首单用户立减9元</p>
                        </div>
                        <div class="flex items-center text-xs text-[#999]">
                            <p class="mr-2">两个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-[#70BC46] text-xs text-white rounded-[3px] flex justify-center items-center" style="background-color: #F1884F">特</div>
                            <p class="text-[#666] text-xs ml-2"> 特价商品五元起</p>
                        </div>

                    </div>
                </div>
            </li>
            <li class="w-full box-border p-2.5 select-none border-b-[#DDD] border-b-solid border-b-[1px] flex">
                <img src="assets/img/sj04.png" class="w-16 h-16">
                <div class="business-info w-full box-border pl-3">
                    <div class="business-info-h flex justify-between items-center mb-2">
                        <h3 class="text-base text-[#333] font-[700]">米村拌饭（浑南店）</h3>
                        <div class="business-info-like w-1.5 h-3.5 bg-[#666] text-white text-4 mr-4 flex justify-center items-center">&#8226;</div>
                    </div>
                    <div class="business-info-star flex justify-between items-center mb-2 text-xs">
                        <div class="business-info-star-left flex items-center">
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <p class="text-[#666] ml-1">4.9 月售345单</p>
                        </div>
                        <div class="bg-[#0097FF] text-[#fff] text-xs rounded-[2px] px-0.5">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="flex justify-between items-center mb-2 text-[#666] text-xs">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>3.22km | 30分钟</p>
                    </div>
                    <div class="flex items-center mb-3">
                        <div class="border-[#DDD] border-solid border-[1px] text-xs text-[#666] rounded-[3px] px-0.5">各种拌饭</div>
                    </div>
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-[#70BC46] text-xs text-white rounded-[3px] flex justify-center items-center">新</div>
                            <p class="text-[#666] text-xs ml-2">饿了么首单用户立减9元</p>
                        </div>
                        <div class="flex items-center text-xs text-[#999]">
                            <p class="mr-2">两个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-[#70BC46] text-xs text-white rounded-[3px] flex justify-center items-center" style="background-color: #F1884F">特</div>
                            <p class="text-[#666] text-xs ml-2"> 特价商品五元起</p>
                        </div>

                    </div>
                </div>
            </li>
            <li class="w-full box-border p-2.5 select-none border-b-[#DDD] border-b-solid border-b-[1px] flex">
                <img src="assets/img/sj05.png" class="w-16 h-16">
                <div class="business-info w-full box-border pl-3">
                    <div class="business-info-h flex justify-between items-center mb-2">
                        <h3 class="text-base text-[#333] font-[700]">申记串道（中海康城店）</h3>
                        <div class="business-info-like w-1.5 h-3.5 bg-[#666] text-white text-4 mr-4 flex justify-center items-center">&#8226;</div>
                    </div>
                    <div class="business-info-star flex justify-between items-center mb-2 text-xs">
                        <div class="business-info-star-left flex items-center">
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <p class="text-[#666] ml-1">4.9 月售345单</p>
                        </div>
                        <div class="bg-[#0097FF] text-[#fff] text-xs rounded-[2px] px-0.5">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="flex justify-between items-center mb-2 text-[#666] text-xs">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>3.22km | 30分钟</p>
                    </div>
                    <div class="flex items-center mb-3">
                        <div class="border-[#DDD] border-solid border-[1px] text-xs text-[#666] rounded-[3px] px-0.5">各种串串</div>
                    </div>
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-[#70BC46] text-xs text-white rounded-[3px] flex justify-center items-center">新</div>
                            <p class="text-[#666] text-xs ml-2">饿了么首单用户立减9元</p>
                        </div>
                        <div class="flex items-center text-xs text-[#999]">
                            <p class="mr-2">两个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-[#70BC46] text-xs text-white rounded-[3px] flex justify-center items-center" style="background-color: #F1884F">特</div>
                            <p class="text-[#666] text-xs ml-2"> 特价商品五元起</p>
                        </div>

                    </div>
                </div>
            </li>
            <li class="w-full box-border p-2.5 select-none border-b-[#DDD] border-b-solid border-b-[1px] flex">
                <img src="assets/img/sj06.png" class="w-16 h-16">
                <div class="business-info w-full box-border pl-3">
                    <div class="business-info-h flex justify-between items-center mb-2">
                        <h3 class="text-base text-[#333] font-[700]">半亩良田排骨米饭</h3>
                        <div class="business-info-like w-1.5 h-3.5 bg-[#666] text-white text-4 mr-4 flex justify-center items-center">&#8226;</div>
                    </div>
                    <div class="business-info-star flex justify-between items-center mb-2 text-xs">
                        <div class="business-info-star-left flex items-center">
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <i class="fa fa-starfa fa-star mr-0.5 text-[#FEC80E]"></i>
                            <p class="text-[#666] ml-1">4.9 月售345单</p>
                        </div>
                        <div class="bg-[#0097FF] text-[#fff] text-xs rounded-[2px] px-0.5">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="flex justify-between items-center mb-2 text-[#666] text-xs">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>3.22km | 30分钟</p>
                    </div>
                    <div class="flex items-center mb-3">
                        <div class="border-[#DDD] border-solid border-[1px] text-xs text-[#666] rounded-[3px] px-0.5">排骨米饭</div>
                    </div>
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-[#70BC46] text-xs text-white rounded-[3px] flex justify-center items-center">新</div>
                            <p class="text-[#666] text-xs ml-2">饿了么首单用户立减9元</p>
                        </div>
                        <div class="flex items-center text-xs text-[#999]">
                            <p class="mr-2">两个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-[#70BC46] text-xs text-white rounded-[3px] flex justify-center items-center" style="background-color: #F1884F">特</div>
                            <p class="text-[#666] text-xs ml-2"> 特价商品五元起</p>
                        </div>

                    </div>
                </div>
            </li>
        </ul>

        <!--        底部菜单部分-->
        <ul class="w-full h-14 border-t border-t-[#DDD] bg-white fixed left-0 bottom-0 flex justify-around items-center ">
            <li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer " onclick="location.href='index.html'">
                <div class="text-xl leading-none"><i class="i ic:baseline-home"></i></div>
                <p class="text-xs leading-none">首页</p>
            </li>
            <li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer ">
                <div class="text-xl leading-none"><i class="i ph:compass"></i></i></div>
                <p class="text-xs leading-none">发现</p>
            </li>
            <li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer ">
                <div onclick="location.href='orderList.html'" class="text-xl leading-none"><i class="i mdi:document"></i></div>
                <p class="text-xs leading-none">订单</p>
            </li>
            <li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer ">
                <div class="text-xl leading-none"><i class="i ic:baseline-person"></i></div>
                <p class="text-xs leading-none">我的</p>
            </li>

        </ul>
    </div>

</body>
</html>